<template>
  <div id="photoview-container" class="photoview-container" v-if="photoInfo.visible">    
    <div class="photoview-tools">        
        <div class="button return"  @click="photoInfo.visible=false"> <i class="fa fa-chevron-left"></i><span>&ensp;&ensp;返回  </span>      </div>        
        <span>{{currentImg.desc}}&ensp;&ensp;</span>
        <!-- <div class="button rotate"  @click="rotateEvent"> <span>旋转90°  </span><i class="fa fa-rotate-left (alias)"></i>      </div> -->
    </div>    
    <div class="photoview-window">        
        <div class="prev-photo">            
            <div class="arrow-container-left" @click="prevPhoto">                
                <div class="arrow-left">
                    <i class="fa fa-chevron-left fa-5x"></i>
                </div>            
            </div>        
        </div>       
        <div class="window-viewport">           
            <div class="picture-container">                
                <img id="viewport" :class="'viewport '+ imgRotate " :src="currentImg.src">            
            </div>
        </div>        
        <div class="next-photo">            
            <div class="arrow-container-right"  @click="nextPhoto">                
                <div class="arrow-right">
                    <i class="fa fa-chevron-right fa-5x"></i>    
                </div>            
            </div>        
        </div>    
    </div>    
    <div class="photoview-desc">
        <span>尺寸:{{imgSize}}&ensp;&ensp;</span>
        <span>[ 第<b>{{currentIndex+1}}</b>张 / 共<b>{{totalImg}}</b>张 ]</span>
    </div>
    <div class="photoview-scroll">        
        <div class="prev-group" @click="prevGroup">        
            <i class="fa fa-angle-double-left fa-3x"></i>        
        </div>        
        <div class="scroll-container">            
            <ul class="scroll-list" :style="'width:'+scrollListWidth+'px' ">           
                <li v-for="(item,index) in photoInfo.photos"  @click="gotoPhoto(index)"  :key="'img-'+index" :class="{'current-img': index == currentIndex }" class="picture" :id="'img-'+index"><img :src="item.src" class="accept-default-image"></li>
            </ul>
        </div>
        <div class="next-group" @click="nextGroup">            
            <i class="fa fa-angle-double-right fa-3x"></i>        
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name:"PhotoViewer",
    props: {
        photoInfo: {
            type: Object,
            default: ()=>{
                return {}
            }
        },
    },
    methods: {
        initDefaultPhoto() {    //初始化默认照片
            this.totalImg = this.photoInfo.photos.length;
            if(this.photoInfo.defaultIndex && this.photoInfo.defaultIndex<this.photoInfo.photos.length){
                this.currentIndex = this.photoInfo.defaultIndex;
                this.currentImg = this.photoInfo.photos[this.photoInfo.defaultIndex]
            }else{
                this.photoInfo.defaultIndex = 0;
                this.currentImg = this.photoInfo.photos[0]
            }
            
        },
        prevPhoto(){    //切换上一张照片
            if(this.currentIndex ==0){
                this.currentIndex = this.totalImg-1;
            }else{
                this.currentIndex = this.currentIndex -1; 
            }
            //this.currentImg = this.photoInfo.photos[this.currentIndex ]
        },
        nextPhoto(){    //切换下一章照片
            if(this.currentIndex == this.totalImg-1){
                this.currentIndex = 0;
            }else{
                this.currentIndex = this.currentIndex + 1; 
            }
            //this.currentImg = this.photoInfo.photos[this.currentIndex ]
        },
        gotoPhoto(index){   //跳转到 第几张 照片
            this.currentIndex = index;
            this.currentImg = this.photoInfo.photos[this.currentIndex ]
        },
        getImageSize() {    //获取图片的原始尺寸
            let i = new Image(); //新建一个图片对象
            i.src = this.currentImg.src; //将图片的src属性赋值给新建图片对象的src
            return new Array(i.width, i.height); //返回图片的长宽像素
        },
        autoResize(){   //尺寸自适应
            this.$nextTick(function(){
                const containerWidth = document.querySelector(".scroll-container").clientWidth;
                this.scrollContainerWidth = containerWidth-40;
            })
        },
        nextGroup(){    //下一组图片
            if(this.pageIndex==this.pageNum-1){
                this.currentIndex = 0;
            }else{
                this.currentIndex = (this.pageIndex+1)*this.pageSize;
            }
            console.log('向下翻页：',this.pageIndex,this.currentIndex,this.pageSize)
            //$(".scroll-container").animate({scrollLeft: (this.pageIndex*this.scrollContainerWidth)}, 1000);
        },
        prevGroup(){    //上一组图片
            if(this.pageIndex==0){
                this.currentIndex = (this.pageNum-1)*this.pageSize;
                this.pageIndex = this.pageNum-1
            }else{
                this.currentIndex = (this.pageIndex-1)*this.pageSize;
            }
            console.log('向上翻页：',this.pageIndex,this.currentIndex,this.pageSize)
        },
        rotateEvent(){
            if(this.imgRotate =='' || this.imgRotate=='imgRotate0'){
                this.imgRotate='imgRotate90';
            }else if(this.imgRotate=='imgRotate90'){
                this.imgRotate='imgRotate180';
            }else if(this.imgRotate=='imgRotate180'){
                this.imgRotate='imgRotate270';
            }else if(this.imgRotate=='imgRotate270'){
                this.imgRotate='imgRotate0';
            }
             
        }
    },
    watch: {
        currentIndex(newValue, oldValue) {  //当前的找片发生了改变
            this.currentImg = this.photoInfo.photos[newValue];
            //计算当前找片位于第几页上
            const refPageIndex = Math.trunc(( newValue )/this.pageSize);
            //将旋转的标签复位
            this.imgRotate = '';
            if(refPageIndex != this.pageIndex){
                this.pageIndex = refPageIndex;
                // 为了简化 代码， 在common.js中引入了jquery
                $(".scroll-container").animate({scrollLeft: (this.pageIndex*(130*this.pageSize))}, 1000);
            } 
        }
    },
    computed: {
        imgSize(){  //获取图片原始尺寸
            const imgSize = this.getImageSize();    
            return  imgSize[0]+'×'+ imgSize[1]
        },
        scrollListWidth(){  //获取图片滚动
            const cellWidth=130;
            this.pageSize = Math.trunc(this.scrollContainerWidth/cellWidth);
            this.pageNum = Math.ceil(this.totalImg/this.pageSize);
            return this.pageNum * this.scrollContainerWidth<this.scrollContainerWidth ? this.scrollContainerWidth : this.pageNum * this.scrollContainerWidth;
        }
    },
    mounted () {
        this.initDefaultPhoto();
        window.addEventListener('resize', this.autoResize, false);
        this.$nextTick(function(){
            this.autoResize();
        })
        
    },
    destroyed () {
        window.removeEventListener('resize', this.autoResize);
    },
    data() {
        return {
            currentImg: {src:'',desc:''},
            currentIndex: 0,
            totalImg: 0,
            scrollContainerWidth:1000,
            pageNum:1,
            pageSize:10,
            pageIndex:0,
            imgRotate:'imgRotate90'
        }
    },
}
</script>

<style scoped>
ul, ol {
    list-style: none;
}
.imgRotate0{
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
.imgRotate90{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.imgRotate180{
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.imgRotate270{
    -moz-transform:rotate(270deg);
    -webkit-transform:rotate(270deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#photoview-container {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    z-index: 100001;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.photoview-tools {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    text-align: center;
    font-size: 2rem;
}
.photoview-tools .button {
    padding-left: 28px;
    box-sizing: border-box;
    float: left;
    width: 135px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(0,0,0,.8);
    color: var(--font-color);
    font-size: 18px;
    margin-right: 15px;
    cursor: pointer;
}
.photoview-tools .return {
    padding-right: 20px;
}
.photoview-tools .rotate{
    float: right;
    padding-right: 20px;
}
.photoview-window {
    position: fixed;
    top: 50%;
    width: 100%;
    height: 65%;
    -webkit-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    transform: translateY(-60%);
}
.photoview-window .window-viewport {
    position: relative;
    margin: auto;
    height: 100%;
    width: 80%;
}
.photoview-window .window-viewport .picture-container {
    height: 100%;
    width: 100%;
    text-align: center;
}
.photoview-window .window-viewport .viewport {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: .15s ease-in-out;
    transition: .15s ease-in-out;
    border: 3px solid var(--button-background-color);
    border-radius: 5px;
    background-color: darkgrey;
    -webkit-animation: move .25s;
    animation: move .25s;
}
.photoview-window .prev-photo {
    position: absolute;
    height: 100%;
    width: 10%;
    left: 0;
    top: 0;
}
.photoview-window .next-photo {
    position: absolute;
    height: 100%;
    width: 10%;
    right: 0;
    top: 0;
}
.photoview-window .arrow-container-right {
    width: 90px;
    height: 90px;
    position: absolute;
    border-radius: 50px;
    top: 41%;
    left: 10%;
    background-color: rgba(0,0,0,.9);
    cursor: pointer;
}
.photoview-window .arrow-container-left {
    width: 90px;
    height: 90px;
    position: absolute;
    border-radius: 50px;
    top: 41%;
    right: 10%;
    background-color: rgba(0,0,0,.9);
    cursor: pointer;
}
.photoview-window .arrow-right {
    width: 26px;
    height: 50px;
    position: absolute;
    top: 10px;
    left: 25px;
}
.photoview-window .arrow-left {
    width: 26px;
    height: 50px;
    position: relative;
    top: 10px;
    left: 15px;
}
.photoview-desc{
    position: absolute;
    bottom: 116px;
    height: 60px;
    width: 100%;
    text-align: center;
}
.photoview-desc span{
    height: 100%;
    line-height: 60px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 2rem;
}
.photoview-scroll {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    height: 116px;
    bottom: 0;
    background-color: rgba(0,0,0,.8);
}
.photoview-scroll .scroll-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    width: 90%;
    overflow: hidden;
}
.photoview-scroll .scroll-container .scroll-list {
    position: absolute;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.photoview-scroll .picture {
    float: left;
    margin-right: 10px;
    border: 3px solid rgba(0,0,0,.8);
    overflow: hidden;
}
.photoview-scroll .current-img {
    border: 3px solid var(--button-background-color);
}
.photoview-scroll .scroll-container .picture,
.photoview-scroll .scroll-container .picture img {
    width: 120px;
    height: 80px;
}
.photoview-scroll .next-group {
    height: 86px;
    width: 35px;
    position: absolute;
    right: 15px;
    top: 15px;
    background-color: #000;
    cursor: pointer;
    padding-top: 20px;
}
.photoview-scroll .prev-group {
    height: 86px;
    width: 35px;
    position: absolute;
    left: 15px;
    top: 15px;
    background-color: #000;
    cursor: pointer;
    padding-top: 20px;
}
.photoview-scroll .arrow-right {
    width: 13px;
    height: 25px;
    position: absolute;
    top: 30px;
    right: 10px;
}
.photoview-scroll .arrow-left {
    width: 13px;
    height: 25px;
    position: absolute;
    top: 30px;
    right: 10px;
}
</style>>
